@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	@font-face {
		font-family: 'Inter var';
		font-weight: 100 900;
		font-display: block;
		font-style: normal;
		src: url('./fonts/Inter-roman-latin.var.woff2') format('woff2');
	}

	@font-face {
		font-family: 'Fira Code VF';
		font-weight: 300 700;
		font-style: normal;
		src:
			url('./fonts/FiraCode-VF.woff2') format('woff2-variations'),
			url('./fonts/FiraCode-VF.woff') format('woff-variations');
	}
}

@layer components {
	.container {
		@apply ~px-5/10 mx-auto w-full max-w-7xl;
	}

	.expressive-code .frame {
		@apply !overflow-clip dark:after:pointer-events-none dark:after:absolute dark:after:inset-0 dark:after:z-10 dark:after:size-full dark:after:rounded-[--header-border-radius] dark:after:ring dark:after:ring-inset dark:after:ring-slate-300/10;
	}

	.expressive-code .frame.has-title:not(.is-terminal) .title {
		border-left: none !important;
		border-top: none !important;
	}
}
